<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

<!--菜单-->
<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item "><a href="/" style="font-size: 20px">首页</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: 20px">习题库</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/item/chapter/overview}">分章节练习</a>
            </dd>
            <dd>
                <a th:href="@{/item/overview}">分题型练习</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: 20px">课程分类</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{'/course/type_show/'+${coursetype.getId()}}" th:each="coursetype:${coursetypes}" th:text="${coursetype.getCourse_name()}"></a>
            </dd>
            <dd>
                <a th:href="@{/course/type_show/0}" >全部课程</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null"><a th:href="@{/community/index}" style="font-size: 20px">社区</a></li>
    <li class="layui-nav-item " th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">社区</a>
        <dl class="layui-nav-child">
            <dd><a th:href="@{/community/index}">社区首页</a></dd>
            <dd><a th:href="@{/stu/community/commenting}">发布话题</a></dd>
            <dd><a th:href="@{/stu/community/management}">我的话题</a></dd>
            <dd><a th:href="@{/stu/chat_all}" target="_blank">头脑风暴</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a th:href="@{/file/list}" style="font-size: 20px">资料干货</a></li>

    <!--如果没有登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/login}" style="font-size: 20px">登录</a>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/register}" style="font-size: 20px">注册</a>
    </li>
    <!--如果没有登录-->

    <!--如果登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">我的班级</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/map/show}">班级签到</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/overview}">班级考试</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/mydegree/list}">我的考试成绩</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">好友管理</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/friends/list}">好友列表</a>
            </dd>
            <dd>
                <a th:href="@{/stu/friends/search}">搜索好友</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <img th:src="@{'/show/'+${session.loginuser.getId()}}" class="layui-nav-img">[[${session.loginuser.username}]]
        <dl class="layui-nav-child">
            <dd><a th:href="@{/stu/center}">个人中心</a></dd>
            <dd><a th:href="@{/stu/logout}">退出</a></dd>
        </dl>
    </li>

    <!--如果登录-->
</ul>
<!--菜单-->

<!--分割线-->
<h2 class="ui center aligned blue icon header">
    <i class="circular student icon"></i>
    开始学习
</h2>
<!--分割线-->

<!--选项框-->
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">课程视频</li>
        <li th:if="${not #lists.isEmpty(datas)}">课程资料</li>
        <li onclick="startexam()">随堂测试</li>
    </ul>
    <div class="layui-tab-content">
<!--        视频-->
        <div class="layui-tab-item layui-show">
            <video id="video" width="1100px" height="500px"  controls="controls">
                <source th:src="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${path}}" type="video/mp4">
            </video>
            <div class="ui  buttons">
                <div class="ui labeled icon button">
                    <a href="javascript:void(0);" onclick="play80()">
                        <i class="left chevron icon" ></i>
                        0.8倍
                    </a>
                </div>
                <div class="ui button">
                    <a href="javascript:void(0);" onclick="play1()">
                        <i class="stop icon" ></i>
                        正常
                    </a>
                </div>
                <div class="ui right labeled icon button">
                    <a href="javascript:void(0);" onclick="play12()">
                        1.2倍数
                        <i class="right chevron icon" ></i>
                    </a>
                </div>
            </div>
        </div>
<!--        视频-->
<!--        课程资料-->
        <div class="layui-tab-item" th:if="${not #lists.isEmpty(datas)}">
            <div class="ui items" >
                <div class="item" th:each="data,iterStat:${datas}">
                    <div class="ui tiny image">
                        <img th:src="@{/images/mypdf.png}">
                    </div>
                    <div class="middle aligned content">
                        <a target="_blank" class="header" th:href="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${data.getPdf()}}" th:text="${data.getName()}"></a>
                    </div>
                </div>
            </div>
        </div>
<!--        课程资料-->
<!--        习题-->
        <div class="layui-tab-item" th:if="${not #lists.isEmpty(radios)}">
            <div class="ui container">
                <div class="ui segment">
<!--                    剩余时间:&nbsp;&nbsp;&nbsp; <span id="sp4"></span>-->
                    <form  method="post" name="examform" class="layui-form" th:action="@{'/course/exam/submit/'+${id}}">
                            <h3 class="ui blue dividing header">随堂测试 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
<!--                        单选题-->
                        <h3 class="ui orange header">一、单选题</h3>
                        <br>
                        <div class="inline  fields" th:each="radio,iterStat:${radios}">
                            <label  class="ui pink header" th:text="${iterStat.index+1}+'.'+${radio.subject}"></label>
                            <br>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="radio"  th:name="${radio.id}" value="[A]" checked="checked" th:title="'A:'+${radio.answer_a}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="radio"  th:name="${radio.id}" value="[B]"  th:title="'B:'+${radio.answer_b}"  >
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="radio"  th:name="${radio.id}" value="[C]"  th:title="'C:'+${radio.answer_c}"  >
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="radio"  th:name="${radio.id}" value="[D]"  th:title="'D:'+${radio.answer_d}"  >
                                </div>
                            </div>
                        </div>
<!--                        单选题-->
                        <br>
                        <br>
                        <br>
                        <button class="ui  blue labeled submit icon button" type="submit" id="submi">
                            <i class="send icon" > </i>
                            提交
                        </button>
                    </form>
                </div>
            </div>
        </div>
<!--        习题-->
<!--        没有习题-->
        <div class="layui-tab-item" th:if="${ #lists.isEmpty(radios)}">
        <h1 class="ui red dividing header">该用户没有发布随堂练习哦</h1>
        </div>
<!--        没有习题-->
    </div>
</div>
<!--选项框-->

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    //倍速器
    var myVideo = document.getElementById("video");
    function play15() {
        myVideo.playbackRate = 1.5;//获取播放速度
    }

    function play12() {
        myVideo.playbackRate = 1.2;//获取播放速度
    }

    function play80() {
        myVideo.playbackRate = 0.8;//获取播放速度
    }

    function play1() {
        myVideo.playbackRate = 1;//获取播放速度
    }
//    倍速器

    //计时器
    // function show_time(totalTime){
    //     if(totalTime==0){
    //         alert("随堂测试时间结束！系统将会自动提交！");
    //         $("form[name='examform']").submit();
    //     }
    //     var remainTime=totalTime-1;
    //     var min = remainTime/60;
    //     min=parseInt(min);
    //     var s=remainTime%60;
    //     if(s<10){
    //         s="0"+s;
    //     }
    //     var str="0"+min+":"+s;
    //     $("#sp4").text(str);
    //     setTimeout("show_time("+remainTime+")",1000);
    // }

    // function startexam(){
        $(function(){
            // show_time(300);
            $("#submi").click(function(){
                var flag=confirm("随堂测试不计入考试成绩，请放心提交");
                if(flag){
                    return true;
                }else{
                    return false;
                }
            });
        });

    // }

//    计时器
</script>
</body>
</html>